<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Leaflet Graticule</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" />
    <![endif]-->
    <style type="text/css">
        html, body, #map { width: 100%; height: 100%; margin: 0; background: #fff; }
    </style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>

</head>
<body>
    <div id="map"></div>

    <script type="text/javascript" src="lib/proj4js-compressed.js"></script>
    <script type="text/javascript" src="lib/proj4leaflet.js"></script>
    <script type="text/javascript" src="lib/countries-110m.js"></script>
    <script src="../leaflet.latlng-graticule.js"></script>

    <script type="text/javascript">

    // Sphere Mollweide: http://spatialreference.org/ref/esri/53009/
    var crs = new L.Proj.CRS('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 +b=6371000 +units=m +no_defs', {
        resolutions: [65536, 32768, 16384, 8192, 4096, 2048]
    });

    var map = L.map('map', {
        crs: crs,
        maxZoom: 5
    });

    L.geoJson(countries, {
        style: {
            color: '#000',
            weight: 0.5,
            opacity: 1,
            fillColor: '#fff',
            fillOpacity: 1
        }
    }).addTo(map);

    L.latlngGraticule({
        showLabel: true,
        lngLineCurved: 2
    }).addTo(map);

    map.fitWorld();

    </script>
</body>
</html>